<template>
  <div>
    <h1>【aty-breadcrumb】 component demo</h1>
    <p>【aty-breadcrumb】 本质</p>
    <aty-row class="fd-breadcrumb-box">
      <aty-row>
        <aty-title level="4">1.【aty-tag】  基础</aty-title>
        <aty-breadcrumb :data="data" />
      </aty-row>
      <aty-row>
        <aty-title level="4">2.【aty-tag】  自定义分隔符separator</aty-title>
        <aty-breadcrumb :data="data" separator="=>" />
      </aty-row>
      <aty-row>
        <aty-title level="4">3.【aty-tag】  带图标,数据中有icon字段</aty-title>
        <aty-breadcrumb :data="data2" />
      </aty-row>

      <aty-row>
        <aty-title level="4">3.【aty-tag】  带点击事件设置 can-click，默认有点击函数</aty-title>
        <aty-breadcrumb :data="data3" can-click />
      </aty-row>
      <aty-row>
        <aty-title level="4">4.【aty-tag】  自定义点击事件，绑定@click事件</aty-title>
        <aty-breadcrumb :data="data4" @click="handleClick" />
      </aty-row>
    </aty-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      data: (function (len) {
        var _data = []
        for (var i = 0; i < len; i++) {
          _data.push({
            name: ['home', 'Components', 'Breadcrumb'][i],
            href: ['http://www.baidu.com', 'http://www.baidu.com'][i]
          })
        }
        return _data
      })(3),
      data2: (function (len) {
        var _data = []
        for (var i = 0; i < len; i++) {
          _data.push({
            name: ['home', 'Components', 'Breadcrumb'][i],
            href: ['http://www.baidu.com', 'http://www.baidu.com'][i],
            icon: ['ios-home-outline', 'social-buffer-outline', 'pound'][i]
          })
        }
        return _data
      })(3),
      data3: (function (len) {
        var _data = []
        for (var i = 0; i < len; i++) {
          _data.push({
            name: ['panel', 'text', 'Breadcrumb'][i],
            href: ['panel', 'text'][i]
          })
        }
        return _data
      })(3),
      data4: (function (len) {
        var _data = []
        for (var i = 0; i < len; i++) {
          _data.push({
            name: ['baidu', 'wuwg', 'Breadcrumb'][i],
            href: ['http://www.baidu.com', 'http://www.wuweigang.com'][i],
            className: 'test' + i
          })
        }
        return _data
      })(3)
    }
  },
  methods: {
    handleClick: function (item) {
      window.location.href = item.href
    }
  }
}
</script>
<style  lang="less" type="text/less"  >
    .fd-breadcrumb-box {
        margin: 20px;
        text-align: left;
    }
</style>
